<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>故障风格图片2</title>
    <style>
        .earth{
            width: 538px;
            height: 527px;
            background:url(../Resources/earth.jpeg);
            position: relative;
        }
        .mix{
            position: absolute;
            left: 60%;
            top:288px;
            width: 150px;
            height: 150px;
            /* margin-left: -100px; */
            background:url(../Resources/ikun.gif) center/cover;
            background-size: cover;
            mix-blend-mode: multiply;
            filter: contrast(3);
        }
        /* .mix::after{
            content: '';
            position: absolute;
            width: 150px;
            height: 150px;
            background:url(../Resources/ikun.gif) #f00;
            background-blend-mode: lighten;
            mix-blend-mode: darken;
            margin-left: 10px ;
            animation: shake 30ms infinite;
        }
        @keyframes shake {
            50%{
                transform: translateX(1%);
            }
        } */
    </style>
</head>

<body>
    <div class="earth">
        <div class="mix"></div>
    </div>
</body>

</html>